.util-loop-big(@counter) when (@counter >=0) {
  .util-loop-big((@counter - 5));
  .w-@{counter} {
    width: ~"@{counter}px" !important;
  }
  .h-@{counter} {
    height: ~"@{counter}px" !important;
  }
  .min-w-@{counter} {
    min-width: ~"@{counter}px" !important;
  }
  .min-h-@{counter} {
    min-height: ~"@{counter}px" !important;
  }
  .max-w-@{counter} {
    max-width: ~"@{counter}px" !important;
  }
  .max-h-@{counter} {
    max-height: ~"@{counter}px" !important;
  }
}

.util-loop-big(400);

.make-loops(@counter) when (@counter >= 0) {
  .make-loops((@counter - 5));
  .margin-top-@{counter}, .margin-vertical-@{counter}, .margin-@{counter} {
    margin-top: ~"@{counter}px" !important;
  }
  .margin-right-@{counter}, .margin-horizon-@{counter}, .margin-@{counter} {
    margin-right: ~"@{counter}px" !important;
  }
  .margin-bottom-@{counter}, .margin-vertical-@{counter}, .margin-@{counter} {
    margin-bottom: ~"@{counter}px" !important;
  }
  .margin-left-@{counter}, .margin-horizon-@{counter}, .margin-@{counter} {
    margin-left: ~"@{counter}px" !important;
  }
  .padding-top-@{counter}, .padding-vertical-@{counter}, .padding-@{counter} {
    padding-top: ~"@{counter}px" !important;
  }
  .padding-right-@{counter}, .padding-horizon-@{counter}, .padding-@{counter} {
    padding-right: ~"@{counter}px" !important;
  }
  .padding-bottom-@{counter}, .padding-vertical-@{counter}, .padding-@{counter} {
    padding-bottom: ~"@{counter}px" !important;
  }
  .padding-left-@{counter}, .padding-horizon-@{counter}, .padding-@{counter} {
    padding-left: ~"@{counter}px" !important;
  }
}

.make-loops(70);

.size-loops(@counter) when (@counter >=12) {
  .size-loops((@counter - 1));
  .f-@{counter} {
    font-size: ~"@{counter}px" !important;
  }
}

.size-loops(40);

